<template>
  <div class="book flex-col-center">
    <book-cover
      :cover="cover"
      :empty="coverEmpty"
      :title="name"
    ></book-cover>
    <div class="book-content flex-1">
      <div
        v-if="name"
        class="name"
      >
        {{ name }}
      </div>
      <div
        v-if="itemInfo.publish"
        class="text"
      >
        {{ itemInfo.publish }}
      </div>
      <div
        v-if="author"
        class="text"
      >
        {{ author }}
      </div>
      <div
        v-if="isbn"
        class="text"
      >
        {{ isbn }}
      </div>
      <div
        v-if="pv"
        class="text"
      >
        借阅{{ pv }}次
      </div>
      <div
        v-if="location"
        class="text"
      >
        {{ location }}
      </div>
    </div>
    <div class="book-rignt flex items-center">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
import BookCover from "@/components/book-cover/book-cover.vue";
export default {
  props: {
    itemInfo: {
      type: Object,
    },
    cover: {
      type: String,
    },
    name: {
      type: String,
      // default: "书名"
    },
    author: {
      type: String,
      // default: "作者"
    },
    isbn: {
      type: String,
      // default: "978-7-5022-8239-4"
    },
    pv: {
      type: Number | String,
      // default: 12
    },
    location: {
      type: String,
      // default: "6053；TU/TS272"
    },
    coverEmpty: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.book {
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 20px;
  width: 184px;
  padding: 0 16px;
  &-content {
    height: 256px;
    margin-top: 14px;
    text-align: center;
    .name {
      font-weight: 500;
      //   font-size: 28px;
      color: #262626;
    }

    .text {
      margin-top: 10px;
      font-weight: 500;
      color: #6c7a94;
    }
  }

  &-right {
    flex-shrink: 0;
  }
}
</style>
